<template>
  <Row class="full-height" style="overflow: hidden">
    <Col :span="16" class="full-height" style="padding-right: 10px">
      <Dagre class="white-background" />
    </Col>
    <Col :span="8" class="full-height">
      <!-- <ScenceDetail style="height: 50%;" /> -->
      <TabCharts style="height: 50%" />
      <TabNodeInfo />
      <!-- <TopologyDetail class="white-background" style="height: 50%;"/> -->
    </Col>
  </Row>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { Row, Col } from "ant-design-vue";
import Topology from "./components/Topology.vue";
import TopologyDetail from "./components/TopologyDetail.vue";
import ScenceDetail from "./components/ScenceDetail.vue";
import TabCharts from "./components/TabCharts.vue";
import Dagre from "./components/Dagre.vue";
import TabNodeInfo from "./components/TabNodeInfo.vue";
import { getTpsStatusApi } from "@/api/tps";
import { useTpsModuleStore } from "@/store/tps";
export default defineComponent({
  components: {
    Row,
    Col,
    Topology,
    TopologyDetail,
    ScenceDetail,
    Dagre,
    TabCharts,
    TabNodeInfo,
  },
  setup() {
    const pollingInterval = ref<any>(null);
    const getTpsStatus = () => {
      getTpsStatusApi().then((res: any) => {
        if (res.code === "0") {
          useTpsModuleStore().setTps({
            isStressed: res.data.stressStatus.isStressed,
            travelServiceTps: res.data.stressStatus.travelServiceTps,
            travelPlanServiceTps: res.data.stressStatus.travelPlanServiceTps,
          });
        }
      });
    };
    return {
      pollingInterval,
      getTpsStatus,
    };
  },
  mounted() {
    this.startPolling()
  },
  methods: {
    startPolling() {
      if (this.pollingInterval) {
        clearInterval(this.pollingInterval);
      }
      this.pollingInterval = setInterval(this.pollingFunction, 1000); //
    },
    async pollingFunction() {
      try {
        // 检查响应数据是否满足停止条件
        await this.getTpsStatus();
      } catch (error) {
        clearInterval(this.pollingInterval); // 在错误时你也可能想停止轮询
      }
    },
    beforeDestroy() {
      if (this.pollingInterval) {
        clearInterval(this.pollingInterval);
      }
    },
  },
});
</script>

<style lang="less">
.white-background {
  background: white;
}
</style>
